import React,{Component} from "react";
import PropTypes from 'prop-types'

class ListItem extends Component{
    constructor(props){
        super(props)
        this.handleClick = this.handleClick.bind(this)
    }
    UNSAFE_componentWillMount () {
        console.log('   UNSAFE_componentWillMount——组件将要挂载（将被移除）')
    }
    componentDidMount() {
        console.log('   componentDidMount——组件挂载完成')
    }
    UNSAFE_componentWillReceiveProps (nextProps, nextContext) {
        console.log('   UNSAFE_componentWillReceiveProps——子组件将接收传参(将被移除)')
    }
    shouldComponentUpdate(nextProps, nextState){
        console.log('   1. shouldComponentUpdate——组件可以被更新，必须返回布尔值，true则继续，false则终止')
        return nextProps.content !== this.props.content;

    }
    UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
        console.log('   2. UNSAFE_componentWillUpdate——组件将被更新前')
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('   3. componentDidUpdate——组件更新后')
    }
    componentWillUnmount(prevProps, prevState, snapshot) {
        console.log('   last. componentWillUnmount——组件将被卸载')
    }

    render() {
        console.log('   render——组件挂载中…')
        return(
            <li
                dangerouslySetInnerHTML={{__html:this.props.content}}
                onDoubleClick={this.handleClick}
            />

        )
    }
    handleClick(){
        // console.log(this.props.deleteItem)
        this.props.deleteItem(this.props.index)
    }
}
ListItem.propTypes={
    content: PropTypes.string,
    index: PropTypes.number.isRequired,
    deleteItem:PropTypes.func
};
ListItem.defaultProps={
    content:'某位可爱的皇帝'
};
export default ListItem;
